<template>
    <view class="container" :style="themeColor">
        <view class="card-group" v-if="userInfo">
            <card-group-cell
                label="头像"
                @click.native="chooseImage"
                :value="userInfo.HeadPortrait"
                :isImgView="true"></card-group-cell>
            <card-group-cell
                ref="userName"
                label="用户名"
                :value="userInfo.UserName"
                :isShowRight="false"
                v-if="false"></card-group-cell>
            <card-group-cell
                ref="NickName"
                label="昵称"
                placeholder="请输入昵称"
                :value="userInfo.NickName"
                :isInputView="true"
                :isShowRight="false"></card-group-cell>
        </view>
        <view class="card-group">
            <card-group-cell
                label="修改登录密码"
                @click.native="easyGoTo('/pages_me/packet/setting/changePwd')"></card-group-cell>
            <card-group-cell
                label="修改交易密码"
                @click.native="easyGoTo('/pages_me/packet/setting/changeDealPwd')"
                v-if="false"></card-group-cell>
        </view>
        <!-- #ifdef APP -->
        <view class="card-group">
            <card-group-cell label="检查版本" :value="getVersion()" @click.native="checkVersion"> </card-group-cell>
        </view>
        <!-- #endif -->
        <view class="card-group" v-if="false">
            <card-group-cell label="清除缓存" @click.native="clearCache"></card-group-cell>
        </view>
        <view class="card-group" v-if="false">
            <card-group-cell label="退出登录" @click.native="logout"></card-group-cell>
        </view>
        <button class="btn btn-success" @click="submit">保存</button>
        <uni-popup ref="popLogout" type="bottom" background-color="#fff" :safe-area="false">
            <view class="bottom-pop">
                <text class="title">确认退出当前账户?</text>
                <view class="actions">
                    <button class="btn btn-gray" @click="cancelLogout">取消</button>
                    <button class="btn btn-danger-hollow" @click="doLogout">退出</button>
                </view>
            </view>
        </uni-popup>
        <app-version ref="appVersion" :isAutoCheck="false" :appId="getAppId()"></app-version>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { GetMemberDetail, SubmitMemberDetail } from "@/service/api/member.js"
import { uploadImage } from "@/service/api/file.js"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
export default {
    components: {
        cardGroupCell,
        appVersion,
		privacyAgreement
    },
    data() {
        return {
            userInfo: null,
        }
    },
    mounted() {},
    onLoad() {
        this.info()
    },
    methods: {
        //修改头像
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.userInfo.HeadPortrait = this.easyGetImgUrl(e.Data.FullPath)
                }
            })
        },
        //提交
        submit() {
            if (this.$refs.NickName.getValue() == "") {
                this.easyToast("请输入昵称")
                return
            }
            this.userInfo.NickName = this.$refs.NickName.getValue()
            SubmitMemberDetail(this.userInfo).then((res) => {
                if (res.State) {
                    this.easyToast("保存成功")
                    //更新缓存里面数据
                    let userInfo = storage.getCache("userInfo")
                    userInfo.HeadPortrait = this.userInfo.HeadPortrait
                    userInfo.NickName = this.$refs.NickName.getValue()
                    storage.setCache("userInfo", userInfo)
                    this.easyGoBack()
                }
            })
        },
        //清除缓存
        clearCache() {
            this.easyToast("清除成功")
        },
        //退出登录
        logout() {
            this.$refs.popLogout.open()
        },
        //退出登录
        cancelLogout() {
            this.closePop()
        },
        //退出登录
        doLogout() {
            this.closePop()
            storage.removeCache("token")
            storage.removeCache("userInfo")
            storage.removeCache("productDisplay")
            uni.reLaunch({
                url: "/pages/login/shop-login",
            })
        },
        //关闭提示弹窗
        closePop() {
            this.$refs.popLogout.close()
        },
        info() {
            GetMemberDetail().then((res) => {
                this.userInfo = res.Data
            })
        },
        getVersion() {
            //#ifdef APP-PLUS
            let ver = plus.runtime.version

            return ver
            //#endif
            return ""
        },
        checkVersion() {
            this.$refs.appVersion.checkVersion()
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: $app-page-padding;
    .card-group-cell .image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 90rpx;
    }
    .card-group-cell {
        .uni-icons {
            color: #ccc;
        }
        text,
        .label,
        .input {
            font-size: 28rpx;
        }
    }
}
.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}
.btn {
    margin-top: 40rpx;
    height: 88rpx;
    font-size: 36rpx;
}
.bottom-pop {
    background: $color-white;
    padding: $app-page-padding;
    border-radius: $border-radius-30 $border-radius-30 0 0;

    .title {
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 20rpx;
        font-size: $font-size-28;
        font-weight: 600;
    }
    .actions {
        display: flex;
        flex-direction: row;
        margin-bottom: 48rpx;
        .btn {
            width: 220rpx;
        }
    }
}
</style>
